<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login" style="height: 100vh;">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="@/static/imgs/bg1.png"></image> 
		<view   style=" width: 260rpx;height: 260rpx;margin:100rpx auto;" >
				<u--image :showLoading="true"  src="/static/logo.png" width="260rpx" height="260rpx" radius='16rpx' @click="click"></u--image>
		</view>
	
		<!-- 标题 -->
		<view class="t-b">{{ title }}{{userInfo.name}} </view>  
		<view  >
			<form class="cl" >
				<view class="t-a">
					<image src="@/static/imgs/sj.png"></image>
					<view class="line"></view>
					<u--input   type="number"
					inputAlign='center'
					placeholderStyle=' margin-left:-110rpx'
					class="input"placeholder="请输入手机号" maxlength="11" v-model="mobile"></u--input>  
				</view>
				<view class="t-a">
					
					<image src="@/static/imgs/yz.png"></image>
					<view class="line"></view>
					<u--input 
					inputAlign='center'
					placeholderStyle=' margin-left:-150rpx'
					 class="input"placeholder="新密码"  v-model="password"></u--input>  
				</view>
				<view class="t-a">
					<image src="@/static/imgs/yz.png"></image>
					<view class="line"></view>
					<u--input class="input"  
					inputAlign='center'
					 placeholder="请输入验证码" 
					placeholderStyle=' margin-left:0rpx' v-model='code'> 
					
						<template slot="suffix">
							<u-code
						 
								ref="uCode"
								@change="codeChange"
								seconds="60"
								changeText="Xs重新获取"
							></u-code>
							<u-button
								@tap="getCode"
								:text="tips"
								 
							></u-button>
						</template>
					 
					</u--input>
					 
				</view>
				<button @tap="login()">确 定</button>
			</form>
				<u-row style="margin-top:40rpx;">
					<u--text @click="tologin"  text='返回登录'  align='center' color='#fff'></u--text>
					<u--text @click="regist"  text='去注册'  align='center' color='#fff'></u--text>
				</u-row>
		 
		</view>

	</view>
</template>
<script>
var that
let UserInfo = require('../../../../service/UserInfo') , mUserInfo;
export default {
	data() {
		return {
			userInfo:{},
			 tips: '',
			value: '',
			is_wxLogin:true,
			title: '欢迎回来！', //填写logo或者app名称，也可以用：欢迎回来，看您需求
			second: 60, //默认60秒
			showText: true, //判断短信是否发送
			mobile: '', //手机号码
			password:'',
			code:'',
			yzm: '' ,//验证码
		 
		};
	},
	onLoad() {
		that = this
	 	mUserInfo = new UserInfo(this.mNetTool)
	},
	computed: {
	},
	methods: {  
		//login模块里的set方法
		codeChange(text) {
		        this.tips = text;
		      },
		getCode() {
			if(this.$refs.uCode.canGetCode) {
								// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
			//这里请求后台获取短信验证码
	 
		},
		tologin(){
			uni.navigateTo({
				url:'../login'
			})
		},
		wxlogin(){  
			
			// console.log(this.$store)
			// let userInfo = {
			// 	name:'张三',
			// 	isLogin: true,
			// 	mobile: '17671078240',
			// }
			// this.setUserInfo(userInfo)
			
			console.log('denglu ') 
				mUserInfo.login({ 
						mobile:that.mobile,
						password:that.password, 
					},res=>{
						console.log('登录结果',res)
						
					})
			return
			uni.showLoading({
				title:'登陆中'
			})
			uni.getProvider({
				service: 'oauth',
				success:res =>{
					console.log('res',res)
					uni.login({
						provider:'weixin',
						success:R=>{
							console.log('R',R)
						  	let access_token = R.authResult.access_token
						 	let openid = R.authResult.openid
						//   this.set_USERINFO('ww')
						mUserInfo.bywxlogin({
							open_id_wx:openid
						},res=>{
							console.log('登录结果',res)
							if(res.success){
								if(res.row[0]){
									uni.setStorageSync('userInfo',res.rows[0])
								}
							}
						 
						})
						}
					})
					uni.getUserInfo({
						provider:'weixin',
						success:uinfo=>{
							console.log('uinfo',uinfo)
						}
					})
				}	
			})
		},
		useACC(){
			that.is_wxLogin = false
		}, 
		regist(){ 
			uni.navigateTo({
				url: '../register/index'
			});
		},
		//当前登录按钮操作
		login() {
			var that = this;
			if (!that.mobile) {
				uni.showToast({ title: '请输入手机号', icon: 'none' });
				return;
			}
			if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.mobile)) {
				uni.showToast({ title: '请输入正确手机号', icon: 'none' });
				return;
			}
			console.log('denglu ')
				mUserInfo.login({ 
						mobile:that.mobile,
						password:that.password, 
					},res=>{
						console.log('登录结果',res)
						
					})
		},
		//获取短信验证码

		//等三方微信登录
		wxLogin() {
			that.is_wxLogin = true
		},
		//第三方支付宝登录
		zfbLogin() {
			uni.showToast({ title: '支付宝登录', icon: 'none' });
		}
	}
};
</script>
<style>
page{
	background-size: 100% 100%;
	background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
	background-image: repeating-linear-gradient(315deg, #00FFFF2E 92%, #073AFF00 100%),repeating-radial-gradient(75% 75% at 238% 218%, #00FFFF12 30%, #073AFF14 39%),radial-gradient(99% 99% at 109% 2%, #00C9FFFF 0%, #073AFF00 100%),repeating-radial-gradient(99% 99% at 21% 78%, #2B184794 0%, #2B184794 51%, #073AFF00 100%),radial-gradient(160% 154% at 711px -303px, #2000FFFF 0%, #073AFFFF 100%);
	 }
.img-a {
	position: absolute;
	width: 100%;
	top: -150rpx;
	right: 0;
}
.img-b {
	position: absolute;
	width: 50%;
	bottom: 0;
	left: -50rpx;
	/* margin-bottom: -200rpx; */
}
.t-login {
	width: 650rpx;
	margin: 0 auto;
	font-size: 28rpx;
	color: #000;
}

.t-login button {
	font-size: 28rpx;
	background: #5677fc;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
}
.input {
	padding: 0 20rpx 0 120rpx;
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	background: #f8f7fc;
	border: 1px solid #e9e9e9;
	font-size: 28rpx;
	border-radius: 50rpx;
}
.t-login input {
	padding: 0 20rpx 0 120rpx;
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	background: #f8f7fc;
	border: 1px solid #e9e9e9;
	font-size: 28rpx;
	border-radius: 50rpx;
}

.t-login .t-a {
	position: relative;
}

.t-login .t-a image {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	left: 40rpx;
	top: 28rpx;
	/* border-right: 2rpx solid #dedede; */
	margin-right: 20rpx;
}
.t-login .t-a .line{
	width: 2rpx;
	height: 40rpx;
	background-color: #dedede;
	position: absolute;
	top: 28rpx;
	left: 98rpx;
}

.t-login .t-b {
	text-align: left;
	font-size: 46rpx;
	color: #fff;
	padding: 15rpx 0 30rpx 0;
	font-weight: bold;
}
.t-login .t-b2 {
	text-align: left;
	font-size: 32rpx;
	color: #aaaaaa;
	padding: 0rpx 0 120rpx 0;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 50rpx auto 0;
}

.t-login .t-g {
	 
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 90rpx 0 0 0;
	color: #9d9d9d;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #000;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}
</style>
